<template>
  <div class="modify-nickname-container">
    <div class="header">
      <!--返回-->
      <span class="back-icon" @click="goBack()"> <</span>
      <span class="title">修改昵称</span>
      <!--完成-->
      <span class="done-button" @click="saveNickname()">完成</span>
    </div>
    <!--提示-->
    <div class="limit-text">
      <span>6个汉字或12个字母以内</span>
    </div>
    <!--输入框-->
    <div class="input-section">
      <input type="text" v-model="nickname" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 获取当前登录用户的昵称
const nickname = ref(localStorage.getItem('nickname') || 'Douman')
// 返回上一页
const goBack = () => {
  // 使用Vue Router进行返回操作
  router.go(-1)
}
// 保存昵称
const saveNickname = () => {
  // 这里可以实现保存昵称的逻辑
  localStorage.setItem('nickname', nickname.value)
  router.push('/my')
}
</script>
<style>
html {
  width: 100%;
  height: 100%;
}
.modify-nickname-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.back-icon {
  padding: 10px;
  cursor: pointer;
}
.title {
  text-align: center;
  flex: 1;
}
.done-button {
  padding: 10px;
  cursor: pointer;
}
.limit-text {
  margin-bottom: 20px;
  margin-left: -170px;
  color: #9e9e9e;
}
.input-section {
  width: 100%;
  margin-bottom: 20px;
}
.input-section input {
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
